<html>
  <head>
    <style>
      .label {
        display: inline-block;
        padding-left: 2px;
        width: 110px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <span class="label">双括号变量：</span>
        <span>{{data.name}}</span>
      </div>
      <div>
        <span>v-model变量：</span>
        <input id="name" v-model="data.name" type="text" />
      </div>
      <div>
        <span class="label">v-text变量：</span>
        <span v-text="data.name"></span>
      </div>
    </div>
  </body>
  <script type="module">
    import { reactive } from "./reactive.js";
    import Compiler from "./compiler.js";

    let data = reactive({ name: "张三" });

    new Compiler(document.querySelector("#app"), { data });
  </script>
</html>
